<!--优惠券-->
<template>
  <div class="DiscountWallpaper">
    <head-nav></head-nav>
    <div class="zanwei-top"></div>
    <mt-navbar v-model="currentTab">
      <mt-tab-item v-for="(tab,index) in tabs" :id="index" :key="index">{{tab}}</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="currentTab">
      <mt-tab-container-item v-for="(tab,index) in tabs" :id="index" :key="index">
        <div class="discountTicket">
          <mt-loadmore
            :top-method="refresh"
            @top-status-change="handleTopChange"
            ref="loadDone"
            :bottom-method="loadMore"
            :bottomDistance="60"
            :bottom-all-loaded="allLoaded"
            @bottom-status-change="handleBottomChange"
          >
            <!--个人信息-->
            <!-- <div class="information">
                          <p>会员: <span>{{userInfo.XF_SURNAME}}</span></p>
                          <p>您当前会员等级: <span>V{{userInfo.XF_GRADE}}</span></p>
            </div>-->
            <!--顶部下拉视图-->
            <div slot="top" class="mint-loadmore-top">
              <i
                v-show="topStatus !== 'loading'"
                :class="{ 'is-rotate': topStatus === 'drop' }"
                class="iconfont icon-iconxlsx"
              ></i>
              <span v-show="topStatus !== 'loading'">{{'pull'===topStatus?'下拉可以刷新':'释放立即刷新'}}</span>
              <mt-spinner
                v-show="topStatus === 'loading'"
                type="triple-bounce"
                :size="40"
                color="#26a2ff"
              ></mt-spinner>
            </div>
            <!--卡券区域-->
            <!-- {{cardList}} -->
            <ul class="cardList">
              <li
                v-for="(card,index) in cardList"
                :key="index"
                @click="exchangeFn(card.ID,card.SFHX)"
              >
                <!--card.sfgq?'#888':-->
                <!--card.backgroundColor-->
                <div class="card" :style="{backgroundColor:card.background}" v-if="card.SFHX == 0">
                  <p class="dt_title">
                    <span class="tname">乐宾百货</span>
                  </p>
                  <div>
                    <span>{{card.TCSJ}}小时停车券</span>
                  </div>
                  <div>
                    <span></span>
                    <span v-if="true">有效期 {{card.YXQ}}</span>
                    <span v-else>已过期</span>
                  </div>
                </div>
                <div class="card" :style="{backgroundColor: gray}" v-else>
                  <p class="dt_title">
                    <span class="tname">乐宾百货</span>
                  </p>
                  <div>
                    <span>{{card.TCSJ}}小时停车券</span>
                  </div>
                  <div>
                    <span></span>
                    <span>已使用</span>
                  </div>
                </div>
              </li>
            </ul>
            <!--底部加载更多-->
            <div slot="bottom" class="mint-loadmore-bottom">
              <i
                v-show="bottomStatus !== 'loading'"
                :class="{ 'is-rotate': bottomStatus === 'drop' }"
                class="iconfont icon-iconxlsx"
              ></i>
              <span v-show="bottomStatus !== 'loading'">{{'pull'===bottomStatus?'上拉加载更多':'释放立即刷新'}}</span>
              <mt-spinner
                v-show="bottomStatus === 'loading'"
                type="triple-bounce"
                :size="40"
                color="#26a2ff"
              ></mt-spinner>
            </div>
          </mt-loadmore>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <!--<div class="zanwei-bottom"></div>-->
    <!-- 底部导航 -->
    <!--<foot-nav></foot-nav>-->
  </div>
</template>

<script>
import { MessageBox, Toast } from "mint-ui";
import api from "@/api/api";
import { defaultCoreCipherList } from "constants";
import { debug } from "util";

export default {
  name: "DiscountTicket",
  data() {
    return {
      tabs: ["未使用", "已使用"],
      currentTab: 0,
      topStatus: "",
      bottomStatus: "",
      allLoaded: false,
      userInfo: {},
      cardList: [],
      row: 10,
      num: 1,
      pageType: 1,
      gray: "#999",
      tk_status: 0,
      btnShow: false
    };
  },
  watch: {
    currentTab: function(newVal, oldVal) {
      this.allLoaded = false;
      this.num = 1;
      this.getUserOrderList(false, newVal);
    }
  },
  methods: {
    exchangeFn(id, sfhx) {
      let page = this;
      if (sfhx == 1) {
        return;
      }
      page.$router.push({
        path: "/ParkingArticle",
        query: {
          id: id
        }
      });
    },
    /**
     * 下拉状态监听
     * @param status 当前状态
     */
    handleTopChange(status) {
      this.topStatus = status;
    },
    /**
     * 上拉状态监听
     * @param status 当前状态
     */
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    /**
     * 刷新页面
     */
    refresh() {
      let that = this;
      let currentTab = that.currentTab;
      that.num = 1;
      that.getUserOrderList(false, currentTab);
    },
    /**
     * 加载更多
     */
    loadMore() {
      let that = this;
      let currentTab = that.currentTab;
      this.num++;
      that.getUserOrderList(true, currentTab);
    },
    /**
     * 获取页面数据
     */
    getUserOrderList(isLoadMore, currentTab) {
      let that = this;
      let row = this.row;
      let num = this.num;
      let sfhx = this.currentTab;
      let vipcode = this.userInfo.XF_VIPCODE;
      if (this.currentTab == 0) {
        //   选择未使用
        api.addGetTcqList(that, vipcode, res => {
          let data = res.data;
          if (data.code === 0) {
            data = data.data;
            console.log("停车券list");
            console.log(data);
            let list = data;
            for (let i = 0; i < list.length; i++) {
              switch (i % 3) {
                case 0:
                  list[i].background = "#e30011";
                  break;
                case 1:
                  list[i].background = "#f8931f";
                  break;
                case 2:
                  list[i].background = "#eb6e93";
                  break;
              }
            }

            if (isLoadMore) {
              that.cardList = that.cardList.concat(list);
              that.$refs.loadDone[currentTab].onBottomLoaded();
            } else {
              that.allLoaded = false;
              that.cardList = list;
              that.$refs.loadDone[currentTab].onTopLoaded();
            }
            if (list.length === 0) {
              that.allLoaded = true;
              Toast("您今日已领取过停车券");
            }
          } else {
            MessageBox("提示", data.msg).then(action =>{
              that.$router.go(-1);//返回上一层
            });
          }
        });
      } else if (this.currentTab == 1) {
        //   选择已使用
        api.getTcqOldList(that, vipcode, row, num, res => {
          let data = res.data;
          if (data.code === 0) {
            data = data.data;
            console.log("停车券list-已使用");
            console.log(data);
            let list = data;
            for (let i = 0; i < list.length; i++) {
              switch (i % 3) {
                case 0:
                  list[i].background = "#e30011";
                  break;
                case 1:
                  list[i].background = "#f8931f";
                  break;
                case 2:
                  list[i].background = "#eb6e93";
                  break;
              }
            }

            if (isLoadMore) {
              that.cardList = that.cardList.concat(list);
              that.$refs.loadDone[currentTab].onBottomLoaded();
            } else {
              that.allLoaded = false;
              that.cardList = list;
              that.$refs.loadDone[currentTab].onTopLoaded();
            }
            if (list.length === 0) {
              that.allLoaded = true;
              Toast("没有更多了");
            }
          } else {
            MessageBox("提示", data.msg);
          }
        });
      }
    }
  },
  created() {},
  mounted() {
    let that = this;
    let type = this.$route.query.type;
    let title;
    let pageType;
    this.pageType = pageType;
    this.$store.commit("TITLE", "我的停车券");
    // document.title = this.$store.state.title;

    api.getUserInfo(this, res => {
      let data = res.data;
      if (data.code === 0) {
        this.userInfo = res.data.data;
        this.getUserOrderList(false, this.currentTab);
      } else if (data.code === 9999) {
        //orcal数据库异常 关闭当前窗口
        MessageBox.alert(data.msg, "温馨提示").then(action => {
          wx.closeWindow();
        });
      } else {
        MessageBox("提示", data.msg);
      }
    });
  }
};
</script>

<style scoped lang="less">
li {
  list-style: none;
}

.DiscountWallpaper {
  padding-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  .mint-tab-container {
    margin-top: 0.06rem;
    flex: 1;
  }
  .mint-msgbox-message {
    font-size: 0.32rem;
  }
  .mint-msgbox-wrapper .mint-msgbox-btns .tkjd_btn {
    font-size: 0.34rem !important;
  }
  .mint-msgbox-wrapper .mint-msgbox-btns .mint-msgbox-confirm {
    font-size: 0.34rem !important;
  }
  .mint-msgbox-wrapper .mint-msgbox-input input {
    font-size: 0.3rem !important;
    height: 0.5rem !important;
  }
}

.mint-loadmore-bottom {
  i {
    display: inline-block;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    vertical-align: middle;
    font-size: 25pt;
    color: #888;
    font-weight: bold;
    transform: rotate(180deg);
  }
  i.is-rotate {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

.mint-loadmore-top {
  height: auto;
  i {
    display: inline-block;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    vertical-align: middle;
    font-size: 25pt;
    color: #888;
    font-weight: bold;
  }
  i.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .mint-spinner-double-bounce {
    margin: 0 auto;
  }
}

.discountTicket {
  /*padding: 0 .4rem;*/
  /*height: 100%;*/
  max-height: 85vh;
  overflow: scroll;
  .information {
    margin: 0.2rem 0.4rem;
    background: #F05DC4;
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0.4rem;
  }
  .cardList {
    margin-top: 0.3rem;
    padding: 0 0.4rem;
    min-height: 75vh;
    .card {
      margin-bottom: 0.3rem;
      transition: background 500ms;
      padding: 0.3rem;
      p {
        color: #fff;
        font-size: 14pt;
        border-bottom: 1px solid #fff;
        line-height: 0.6rem;
      }
      div {
        display: flex;
        align-items: center;
        /*margin-top: .1rem;*/
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        span:nth-child(1) {
          font-weight: bold;
          font-size: 16pt;
          line-height: 0.7rem;
          flex-shrink: 1;
        }
        span:nth-child(2) {
          text-align: right;
          flex: auto;
        }
      }
      .dt_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0.6rem;
        .tksq {
          font-size: 0.28rem;
          height: 0.44rem;
          width: 1.42rem;
          border-radius: 0.08rem;
          border: 1px solid #ffffff;
          line-height: 0.44rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
